<template>
  <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
    <van-area
      title="地区"
      :area-list="areaList"
      @cancel="show = false"
      @confirm="confirm"
      :columns-num="2"
    />
  </van-popup>
</template>  
<script>
import { Popup, Area } from "vant";
import { areaList } from "@/assets/js/area";
export default {
  components: {
    [Popup.name]: Popup,
    [Area.name]: Area,
  },
  data() {
    return {
      show: false,
      areaList: areaList,
    };
  },
  methods: {
    confirm(val) {
      this.$emit("area-event", val);
      this.show = false;
    },
  },
};
</script>